<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.分析Hello</title>
		<!-- 引入vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				几个注意点：
						1.Vue实例和容器是一一对应的，真实开发中一定只有一个Vue实例，且真实开发中会配合组件一起使用。
						2.data中的数据只要发生改变，模板中用到该数据的地方，就会自动更新。
						3.{{xxx}}中的xxx要写js表达式，且xxx可以直接读取到data中配置的所有属性。

						注意区分【js表达式】与【js语句（代码）】
									1.表达式：会产生一个值，可以放在任何一个需要值的地方
												(1).100
												(2).a
												(3).demo()
												(4).x === y ? 1 : 0
												(5). 200 - 2
												(6). arr.map()
									2.语句（代码）: 不会产生值，只是控制代码走向
												(1). if(){}
												(2). for(){}
												(3). try{} catch(err){}
												等等.....
		-->
		<!-- 准备好一个容器 -->
		<div id="demo">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{address}}</h1>
			<hr>
			<h1>人名：{{person.name}}</h1>
			<h1>年龄：{{person.age}}</h1>
			<hr>
			<h1>人名（大写）：{{person.name.toUpperCase()}}</h1>
			<h1>年龄（大1岁）：{{person.age + 1}}</h1>
			<h1>{{ person.age > 18 ? '成年' : '未成年' }}</h1>
			<h1>{{100}}</h1>
			<h1>{{100 + 1}}</h1>
			<h1>{{'100' + 1}}</h1>
		</div>


		<script type="text/javascript" >
			//阻止 vue 在启动时生成生产提示
			Vue.config.productionTip = false

			//创建一个Vue实例对象
			new Vue({
				el:'#demo', //el的值可以是：css选择器字符串（用的多）、写一个真实的DOM元素（几乎不用）
				data:{ //data用于配置数据，数据供el所指定的容器去使用，data的值暂时先写成一个对象
					name:'尚硅谷',
					address:'宏福科技园',
					person:{
						name:'tom',
						age:13
					}
				}
			})
		</script>
	</body>
</html>